<template>
    <div class="user">
    <el-row>
        <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
     </el-row>
        <el-row>
  <el-col :span="24">
  <el-input placeholder="请输入内容" class="search-input" v-model="query"   @keydown.native.enter="list" >
          <el-button slot="append" icon="el-icon-search" @click="list"></el-button>
        </el-input>
  <el-button type="success" plain @click="addlogFormVisible=true">添加用户</el-button>
  </el-col>
</el-row>

<el-table
    v-loading="loading"
    :data="userlist"
    border
    style="width: 100%">
    <el-table-column
        type="index"
        width="50">
      </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话">
    </el-table-column>
   <el-table-column label="用户状态">
        <template slot-scope="scope">
       <el-switch v-model="scope.row.mg_state" active-color="#13ce66"   inactive-color="#ff4949" @change="changes(scope.row)">
        </el-switch>
        </template>
</el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button  size="mini"  icon="el-icon-edit"  type="primary" plain  @click="handleEdit(scope.row)"></el-button>                
        <el-button   size="mini"  icon="el-icon-delete" type="danger" plain @click="handleDelete(scope.row)"></el-button>  
        <el-button  size="mini" icon="el-icon-check" type="warning" plain  @click="handleGrant(scope.row)"></el-button>                          
      </template>
    </el-table-column>
  </el-table>
  
  <div class="page">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

<el-dialog title="用户添加" :visible.sync="addlogFormVisible" >
  <el-form :model="addform" label-width=80px  :rules="rules" ref="userform">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="addform.username" auto-complete="off"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="password">
      <el-input v-model="addform.password" auto-complete="off"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email">
      <el-input v-model="addform.email" auto-complete="off"></el-input>
    </el-form-item>
     <el-form-item label="电话" prop="mobile">
      <el-input v-model="addform.mobile" auto-complete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addlogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submituser('userform')">确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="用户编辑" :visible.sync="editlogFormVisible" >
  <el-form :model="editform" label-width=80px   ref="userform" :rules="rules">
    <el-form-item label="用户名" prop="username" :disable=false>
     <el-input v-model="editform.username" auto-complete="off"  :disabled="true"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email">
      <el-input v-model="editform.email" auto-complete="off"></el-input>
    </el-form-item>
     <el-form-item label="电话" prop="mobile">
      <el-input v-model="editform.mobile" auto-complete="off" ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="editlogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="editusersubmit('userform')">确 定</el-button>
  </div>
</el-dialog>

<el-dialog title="角色分配" :visible.sync="grantlogFormVisible" >
  <el-form :model="grantform" label-width=120px>
    <el-form-item label="用户名" prop="username"  :disable=false>
    <el-tag type="info">{{grantform.username}}</el-tag>
    </el-form-item>

    <el-form-item label="请选择角色：">
    <el-select v-model="roleId" placeholder="请选择角色">
      <el-option 
      v-for="(item,index) in rolelist" :key = "index"
      :label="item.roleName" :value="item.id">


      </el-option>      
    </el-select>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="grantlogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="grantuser">确 定</el-button>
  </div>
</el-dialog>
</div>
</template>
<script>
import {getlist,changestate,adduser,getuserbyid, edituser,deleuser,getroles,grantroles} from '@/api'
export default {
   data() {
      return {
        userlist: [],
        value2: true,
        query:'', //关键词搜索
        total:0,  //总条数
        pagesize:10, //每页条数
        pagenum:1,  //第几页
        addform:{
          username:'',
          password:'',
          email:'',
          mobile:''
        },

        editform:{
          username:'',
          email:'',
          mobile:''
        },
        editlogFormVisible:false,
        addlogFormVisible:false,
       
        grantlogFormVisible:false,

        grantform:{},
        rolelist:[],
        roleId:'',
        //加载动画
         loading: true,
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {  required: true, message: '请输入用密码', trigger: 'blur'}
          ],
          email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
           { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          mobile: [
            { required: true, message: '请输入电话号', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
        this.list()
    },
     methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.list()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.list()
      },
       // 初始化表格数据
      list(){
        this.loading = true;
         getlist({params:{query:this.query,pagenum:this.pagenum,pagesize: this.pagesize}}).then(res=>{
            //  console.log(res,111);
             this.userlist = res.data.users;
             this.total = res.data.total;
         })
          this.loading =false
     },
     //改变用户状态
     changes(row){
      //  console.log(row,777);
       changestate({uId:row.id,type:row.mg_state}).then(res=>{
        //  console.log(res,88);
         if(res.meta.status ===200){
           this.$message({
             message:'修改成功',
             type:'success'
           })
         }else{
            this.$message({
             message:res.meta.msg,
             type:'warning'
           })
         }
       }) 
     },
     //添加用户
     submituser(userform){
       this.$refs[userform].validate(valid => {
          if(valid){
            adduser(this.addform).then(res=>{
              // console.log(res);
              if(res.meta.status ===201){
                this.$message({
                    message:'添加成功',
                    type:'success'
                })
              }else{
            this.$message({
             message:res.meta.msg,
             type:'warning'
           })
         }
          this.addlogFormVisible=false;
          this.list()
            })
          }
       })
     },
      //编辑用户获取
      handleEdit(row){
       this.editlogFormVisible= true;
      //  console.log(row.id,123);
      getuserbyid({id:row.id}).then(res=>{
        if(res.meta.status ===200){
          this.editform = res.data;
          this.editform.id = res.data.id
        }
      })
      },
    //编辑用户
      editusersubmit(userform){
        this.$refs[userform].validate(valid=>{
          if(valid){
            // console.log(this.editform,4456);
            edituser(this.editform).then(res=>{
              // console.log(res,789);
              if(res.meta.status ===200){
                this.$message({
                  type:'success',
                  message:'修改成功'
                })
              }else{
                this.$message({
                  type:'warning',
                  message:res.meta.msg
                })
              }
              this.editlogFormVisible= false;
              this.list()

            })
          }
        })
      },

    //删除用户
      //对话框
    handleDelete(row) {
     
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleuser(row.id).then(res=>{
            if(res.meta.status ===200){
              this.$message({
                type: 'success',
                message: '删除成功!'
               });
            }

        this.list()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    

     //角色分配获取
      handleGrant(row){
        this. grantform = row;
        // console.log(row,7777);
         this.grantlogFormVisible =true;
         getroles().then(res=>{
           if(res.meta.status === 200){
            //  console.log(res,5555);
             this.rolelist = res.data
           }
         })

        },
        //角色分配
       grantuser(){

         //防止选择角色为空
         if(!this.roleId){
           this.$message({
              type:'warning',
              message:'角色不能为空'
            })
         }else{
           grantroles({id:this.grantform.id,rid:this.roleId}).then(res=>{
          //  console.log(res,123);
          if(res.meta.status ===200){
            this.$message({
              type:'success',
              message:'添加成功'
            })
          }else{
            this.$message({
              type:'warning',
              message:res.meta.msg
            })
          };
          this.grantlogFormVisible=false
         })
         }
         
      }
      
    },
    
     

}
</script>
<style lang="scss" scoped>
.user {
  .margin-20 {
    margin: 20px 0;
  }
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
}
</style>
